<template>
	<view class="container">
		<!-- 标题栏 -->
		<title-bar :showBack="true" title="商品详情"></title-bar>
		<!-- 内容区 -->
		<view class="container-main" v-if="loadEnd">
			<view class="main-carousel">
				<!-- <u-swiper :list="list1" height="562rpx" :indicator="true"></u-swiper> -->
				<u-swiper :list="list1" keyName="banner_image" height="562rpx" @click="onswiperclick"></u-swiper>
			</view>
			<view class="main-info">
				<view class="info-price">
					<view class="title"><text>￥</text>{{goodsDetails.price}}</view>
					<view class="subtitle">￥{{goodsDetails.ot_price}}</view>
				</view>
				<view class="info-title">{{goodsDetails.name}}</view>
				<view class="info-parameter" @click="handleExpand()">
					<view class="parameter-title">参数</view>
					<view class="parameter-value"
						:class="{'multiLine': isMultiLine, 'text-ellipsis' : !isExpand && isMultiLine}">
						<text id="specsText">{{goodsDetails.paramJson}}</text>
					</view>
					<view class="parameter-more" :class="{rotate: isExpand}" v-if="isMultiLine">
						<image class="icon"
							src="https://sass-test.doit10019.com/upload/202505/20155155-63314243175140262.png?attname=icon-down.png"
							mode="aspectFit"></image>
					</view>
				</view>
			</view>
			<view class="main-content">
				<view class="content-title">商品详情</view>
				<mp-html :content="goodsDetails.content" />
			</view>
			<view class="main-footer">
				<view class="flex align-items-center">
					<!-- #ifdef MP-WEIXIN -->
					<button class="footer-item clear" open-type="share">
						<image class="item-icon"
							src="https://sass-test.doit10019.com/upload/202505/20153906-84853844598702205.png?attname=share.png"
							mode="aspectFit"></image>
						<text class="item-text">分享</text>
					</button>
					<!-- #endif -->
					<view class="footer-item" @click="toShoppingCart()">
						<image class="item-icon"
							src="https://sass-test.doit10019.com/upload/202505/20153840-99339258638895772.png?attname=cart.png"
							mode="aspectFit"></image>
						<text class="item-text">购物车</text>
						<view class="item-number" v-if="Number(cartNumber) > 0">{{cartNumber}}</view>
					</view>
					<view class="flex-item flex justify-content-end">
						<view class="footer-btn flex-item" style="background: #FFA820" @click="handleAddCart()">加入购物车
						</view>
						<view class="footer-btn flex-item" style="background: #1e88e5" @click="toOrder()">立即购买
						</view>
					</view>
				</view>
				<view class="safe-padding"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 页面是否阻止滚动
				pageShow: false,
				// 是否加载完成
				loadEnd: true,
				// 商品Id 
				goodsId: '',
				// 商品详情
				goodsDetails: {
					content: '',
					id: 4,
					image: "https://xiehui.doit10019.com/uploads/20250210/c0ecc9ac78256e7ad7fdca9227dafadf.jpg",
					name: "泳池救生用品泳池救生用品",
					ot_price: "1000.00",
					price: "680.00",
					paramJson: '第一次让我主笔公众号，:坚持自己的风格，这么一想，精彩的公众号每篇都是，让我写我就按照我的风格去操作。没错，我最大的风格就是喜欢“偷懒”，下载了一个AI生成器本来想着用AI写一篇交工，然后发现过于官方且不尽人意，不过AI的可爱之处是，它把每一位老师的摄影风格都总结了一下，一不小心，又让我多学习了一会儿。福州是我第一次来，厦门去过几次，讲个我知道的小知识，福建省的车牌分布很特殊，一般来说闽A是省会，闽B一定是经济第二高的城市，但是福建省的车牌分布是按照顺时针来搞的，所以厦门只分到了闽D'
				},
				// 商品参数是否展开
				isExpand: false,
				// 商品参数是否存在多行
				isMultiLine: false,
				// 轮播图列表
				carouselList: [],
				// 购物车数量
				cartNumber: 0,
				list1: [{
						applet_id: 21,
						banner_image: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/6a/54ad09877f399769dbae3245b189e3.jpg?attname=ac094c83a45a9a5d.jpg",
						image_type: 0,
					},
					{
						applet_id: 21,
						banner_image: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/1c/e85e1664cf6ac4fcb2928cefa2eb2a.jpg?attname=ANNER%E8%BD%AE%E6%92%AD%E5%9B%BE+%281%29.jpg",
						image_type: 0,
					}
				]
			}
		},

		onLoad(option) {
			this.loadEnd = true
			this.getCollapse()
		},
		onShareAppMessage() {
			return {
				title: this.goodsDetails.name,
				path: '/pagesMall/goods/details?id=' + this.goodsId,
				imageUrl: this.carouselList[0].image,
			}
		},
		onShareTimeline() {
			return {
				title: this.goodsDetails.name,
				path: '/pagesMall/goods/details?id=' + this.goodsId,
				imageUrl: this.carouselList[0].image,
			}
		},
		methods: {
			// 展示更多切换事件
			handleExpand() {
				this.isExpand = !this.isExpand
			},
			// 获取文字是否存在折叠
			getCollapse() {
				uni.createSelectorQuery().select('#specsText').boundingClientRect((rect) => {
					if (rect.height > uni.upx2px(40)) {
						this.isMultiLine = true
						this.isExpand = false
					} else {
						this.isMultiLine = false
						this.isExpand = true
					}
				}).exec();
			},
			// 跳转购物车
			toShoppingCart() {
				this.$util.toPage({
					mode: 1,
					path: "/page_mechanism/cart/index"
				})
			},
			// 前往订单确认
			toOrder() {
				uni.navigateTo({
					url: "/page_mechanism/goods/order",
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
	}
	
	image {
		display: block;
		width: 100%;
		height: 100%;
	}
	
	view {
		box-sizing: border-box;
	}
	
	button::after {
		border: none;
	}
	
	button.clear {
		padding: 0;
		margin: 0;
		border: none;
		background: transparent;
		line-height: 1.3;
	}
	
	button.clear::after {
		display: none;
	}
	.container {
		background: #F6F7FB;

		.alignment {
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
		}

		.alignments {
			display: flex;
			align-items: center;
		}

		.flex {
			display: flex;
		}

		.inline-flex {
			display: inline-flex;
		}

		.flex-item {
			flex: 1;
			min-width: 0;
		}

		.flex-center {
			align-items: center;
			justify-content: center;
		}

		.flex-wrap {
			flex-wrap: wrap;
		}

		.flex-direction-column {
			display: flex;
			flex-direction: column;
		}

		.align-items-center {
			align-items: center;
		}

		.align-items-start {
			align-items: flex-start;
		}

		.align-items-end {
			align-items: flex-end;
		}

		.justify-content-between {
			justify-content: space-between;
		}

		.justify-content-around {
			justify-content: space-around;
		}

		.justify-content-center {
			justify-content: center;
		}

		.justify-content-start {
			justify-content: flex-start;
		}

		.justify-content-end {
			justify-content: flex-end;
		}

		.wbcentre {
			text-align: center;
		}

		.text-ellipsis {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: break-all;
		}

		.text-ellipsis-more {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			overflow: hidden;
			-webkit-line-clamp: 2;
			word-break: break-all;
		}

		.safe-padding {
			width: 100%;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
		}


		.uni-app--showtabbar uni-page-wrapper::after {
			display: none !important;
		}

		.container-main {
			padding-bottom: 112rpx;

			.main-info {
				position: relative;
				z-index: 9;
				margin-top: -74rpx;
				padding: 32rpx 40rpx;
				border-radius: 40rpx 40rpx 0 0;
				background: #FFF;

				.info-price {
					display: flex;
					align-items: flex-end;

					.title {
						color: var(--theme-color);
						font-size: 48rpx;
						font-weight: 600;
						line-height: 1;
						padding: 10rpx 0;

						text {
							font-size: 28rpx;
						}
					}

					.subtitle {
						margin-left: 24rpx;
						color: #8D929C;
						font-size: 28rpx;
						line-height: 40rpx;
						text-decoration-line: line-through;
						padding: 10rpx 0;
					}
				}

				.info-title {
					margin-top: 32rpx;
					color: #5A5B6E;
					font-size: 32rpx;
					font-weight: 600;
					line-height: 44rpx;
				}

				.info-parameter {
					margin-top: 32rpx;
					display: flex;

					.parameter-title {
						color: #5A5B6E;
						font-size: 28rpx;
						font-weight: 600;
						line-height: 40rpx;
					}

					.parameter-value {
						flex: 1;
						margin-left: 32rpx;
						height: 40rpx;
						color: #8D929C;
						font-size: 28rpx;
						line-height: 40rpx;
						overflow: hidden;

						&.multiLine {
							height: auto;
						}
					}

					.parameter-more {
						width: 24rpx;
						height: 40rpx;
						margin-left: 24rpx;

						&.rotate {
							transform: rotate(180deg);
						}
					}
				}
			}

			.main-content {
				flex: 1;
				display: flex;
				flex-direction: column;
				padding: 32rpx 40rpx;
				background: #FFFFFF;
				// margin-top: 12rpx;
				border-top: 12rpx solid #F6F7FB;

				.content-title {
					color: #5A5B6E;
					font-size: 28rpx;
					font-weight: 600;
					margin-bottom: 32rpx;
				}
			}

			.main-footer {
				position: fixed;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: 96;
				background: #FFF;
				border-top: 1rpx solid #F6F7FB;
				padding: 16rpx 32rpx;

				.footer-item {
					position: relative;
					margin-right: 32rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					min-width: 60rpx;

					.item-icon {
						width: 52rpx;
						height: 52rpx;
					}

					.item-text {
						color: #5A5B6E;
						font-size: 20rpx;
						line-height: 28rpx;
					}

					.item-number {
						position: absolute;
						top: 0;
						left: 100%;
						transform: translateX(-50%);
						margin-left: -6rpx;
						color: #FFF;
						text-align: center;
						font-size: 16rpx;
						line-height: 20rpx;
						min-width: 20rpx;
						height: 20rpx;
						border-radius: 10rpx;
						padding: 0 4rpx;
						background: var(--theme-color);
					}
				}

				.footer-btn {
					color: #ffffff;
					font-size: 28rpx;
					line-height: 40rpx;
					padding: 20rpx;
					border-radius: 16rpx;
					background: var(--theme-color);
					text-align: center;
					margin-right: 20rpx;

					&:last-child {
						margin-right: 0;
					}
				}
			}
		}
	}
</style>